<template>
    <el-dialog
    @close="cancelSubmit"
    :title="type == 1 ? '新增备件清单' : '编辑备件清单'"
    :visible.sync="show"
    width="897px"
    center>
    <div>
        <el-form ref="form" :model="form" label-width="100px" class="formContainer">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="物料编码" label-position="left">
                        <el-input v-model="form.No" placeholder="请输入物料编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物料名称" label-width="100px" label-position="left">
                        <el-input v-model="form.Name" placeholder="请输入物料名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物料分类" label-width="100px">
                        <el-select v-model="form.CategoryId" placeholder="请选择物料分类">
                            <el-option v-for="(item, index) in typeList" :label="item.Name" :key="index" :value="item.Id">{{item.Name}}</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="标准单位" label-width="100px" label-position="left">
                        <el-input v-model="form.StandardUnitId" placeholder="请输入标准单位"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="默认仓库" label-width="100px">
                        <el-select v-model="form.DefaultWarehouseId" placeholder="请选择默认仓库">
                            <el-option v-for="(item, index) in wareHouse" :label="item.Name" :key="index" :value="item.Id">{{item.Name}}</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="等级" label-width="100px">
                        <el-select v-model="form.Grade" placeholder="请选择等级">
                            <el-option v-for="(item, index) in typeList" :label="item.Name" :key="index" :value="item.Id">{{item.Name}}</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="品牌" label-width="100px">
                        <el-select v-model="form.BrandId" placeholder="请选择品牌">
                            <el-option v-for="(item, index) in brands" :label="item.Name" :key="index" :value="item.Id">{{item.Name}}</el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="默认供应商" label-width="100px">
                        <el-select v-model="form.DefaultSupplierName" @change="selectChange" filterable remote reserve-keyword :remote-method="remoteMethod"  placeholder="请选择默认供应商">
                            <el-option v-for="(item, index) in supplierList" :label="item.Name" :key="index" :value="item.Id">{{item.Name}}</el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="管理方式" label-width="100px">
                        <el-select v-model="form.ManageStyle" placeholder="请选择管理方式">
                            <el-option v-for="(item, index) in manageStyle" :label="item.Name" :key="index" :value="item.Id">{{item.Name}}</el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="规格" label-position="left" label-width="100px">
                        <el-input v-model="form.Spec" placeholder="请输入规格"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="型号" label-position="left" label-width="100px">
                        <el-input v-model="form.Model" placeholder="请输入型号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="有效期" label-position="left" label-width="100px" class="FormItem">
                        <el-input v-model="form.ValidityTime" placeholder="请输入有效期" ></el-input>
                        <el-select v-model="form.ValidityTimeUnit" placeholder="单位" class="Unit">
                            <el-option v-for="(item, index) in timeList" :label="item.Name" :key="index" :value="item.Id">{{ item.Name }}</el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="描述" >
                      <el-input type="textarea" v-model="form.Desc" placeholder="请输入分类描述"></el-input>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="tabs" >
            <el-button type="primary" style="float: right;z-index: 100;position: absolute;right: 20px;" @click="addNew">新增</el-button>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="替代件" name="replace">
                    <div class="replaceList">
                        <table-cmp
                    style="width:100%"
                    class="table_cmp"
                    :loading="loading"
                    :table-data="form.ReplaceMaterielDetail"
                    Height='166'
                    :table-label="replace_tableLabel"
                    @handleButton="handleButton"
                    @rowClick="rowClick"
                    @cellClick="cellClick"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    ></table-cmp>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="单位换算" name="unit">
                    <table-cmp
                    style="width:100%"
                    class="table_cmp"
                    :loading="loading"
                    :table-data="form.UnitConvertDetail"
                    Height='166'
                    :table-label="unit_tableLabel"
                    @handleButton="handleButton"
                    @rowClick="rowClick"
                    @cellClick="cellClick"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    ></table-cmp>
                </el-tab-pane>
                <el-tab-pane label="图片库" name="imgs">
                    <div class="imgList">
                        <el-upload
                        action="ws://192.168.1.39:7777/Handler.ashx?ConnectString="
                        list-type="picture-card"
                        multiple
                        :file-list="form.MaterielImageDetail"
                        :auto-upload="false"
                        :on-change="handleChange"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" append-to-body>
                        <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="物料清单" name="materielList">
                    <table-cmp
                    style="width:100%"
                    class="table_cmp"
                    :loading="loading"
                    :table-data="form.MaterielBOMDetail"
                    Height='166'
                    :table-label="materiel_tableLabel"
                    @handleButton="handleButton"
                    @rowClick="rowClick"
                    @cellClick="cellClick"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    ></table-cmp>
                </el-tab-pane>
                <el-tab-pane label="作业标准" name="standard">
                    <table-cmp
                    style="width:100%"
                    class="table_cmp"
                    :loading="loading"
                    :table-data="form.OperationStandardDetail"
                    Height='166'
                    :table-label="standard_tableLabel"
                    @handleButton="handleButton"
                    @rowClick="rowClick"
                    @cellClick="cellClick"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    ></table-cmp>
                </el-tab-pane>
                <el-tab-pane label="扩展属性" name="extend">
                    <table-cmp
                    width="100%"
                    class="table_cmp"
                    :loading="loading"
                    :table-data="form.ExPropertyDetail"
                    Height='166'
                    :table-label="extend_tableLabel"
                    @handleButton="handleButton"
                    @rowClick="rowClick"
                    @cellClick="cellClick"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    ></table-cmp>
                </el-tab-pane>
              </el-tabs>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
    </span>
    <replace-prop  :visible="showReplace" :addData="maskData" :type="formType" @closePropMask="closePropMask" @dataSubmit="dataSubmit"></replace-prop>
    <unit-transfor :visible="showUnit" :addData="maskData" :type="formType" @closePropMask="closePropMask" @dataSubmit="dataUnitSubmit"></unit-transfor>
    <operation-standard :visible="showStandard" :addData="maskData" :type="formType" @closePropMask="closePropMask" @dataSubmit="dataStandardSubmit"></operation-standard>
    <extend-attr :visible="showExtend" :addData="maskData" :type="formType" @closePropMask="closePropMask" @dataSubmit="dataExtendSubmit"></extend-attr>
    <materiel-bom :visible="showMaterielList" :addData="maskData" :type="formType" @closePropMask="closePropMask" @dataSubmit="dataMaterielSubmit"></materiel-bom>
    </el-dialog>
</template>

<script>
var that;
var process = {
  template: `<div>
            <el-button type="text" size="small" @click="edit()">编辑</el-button>
            <el-button type="text" size="small" @click="del()">删除</el-button>
  
  </div>`,
  props:['row', 'keyindex'],
  methods: {
    edit() {
        that.clickEdit(this.row, this.keyindex)
    },
    del() {
        that.clickDel(this.row, this.keyindex)
    }
  }
}
import replaceProp from './replaceProp.vue'
import unitTransfor from './unitTransfor.vue'
import operationStandard from './operationStandard.vue'
import extendAttr from './extendAttr.vue'
import materielBom from './materielBom.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'archives',
  data() {
    return {
        // 默认供应商
        supplierList: [],
        // 远程物料
        optionList: [],
        // 文件上传
        currentFile: null,
        // 弹框内表格编辑弹框
        showReplace: false,
        showMaterielList: false,
        showExtend: false,
        showStandard: false,
        showUnit: false,
        replaceType: '1',
        unitType: '1',
        extendType: '1',
        standardType: '1',
        formType: '1',
        currentIndex: '',
        maskData: {},
        // 
        show: false,
        activeName: 'replace',
        loading: false,
        dialogVisible: false,// 图片展示
        dialogImageUrl:'',
        timeList: [
            {
                Name: '年',
                Id: '1'
            },
            {
                Name: '月',
                Id: '2'
            },
            {
                Name: '日',
                Id: '3'
            }
        ],
        form: {
            No: '',
            Name: '',
            ParentId: '',
            Desc: '',
            CategoryId:'',
            IsReplaceMateriel: false,
            IsTool: false,
            IsAssets: false,
            StandardUnitId: '',
            DefaultWarehouseId:'',
            Grade: '',
            BrandId: '',
            DefaultSupplierId: '',//默认供应商
            ManageStyle:'',
            Spec: '',
            Model: '',
            ValidityTime: '',
            ValidityTimeUnit: '',
            ReplaceMaterielDetail: [],
            UnitConvertDetail: [],
            MaterielBOMDetail: [],
            OperationStandardDetail: [],
            ExPropertyDetail: [],
            MaterielImageDetail: []
        },
        replace_tableLabel:[
            { label: '优先级', param: 'Level',  align: 'center', sortable: false},
            { label: '物料编码', param: 'MaterielNo',  align: 'center', sortable: false},
            { label: '物料名称', param: 'MaterielName',  align: 'center', sortable: false},
            { label: '备注', param: 'Remark',  align: 'center', sortable: false},
            { label: '操作', align: 'center', width: '300',
                component:process
            }
        ],
        unit_tableLabel: [
            { label: '序号', type: 'index', align: 'center', sortable: false},
            { label: '单位名称', param: 'Name',  align: 'center', sortable: false},
            { label: '换算数量', param: 'Number',  align: 'center', sortable: false},
            { label: '是否标准单位', param: 'IsBase',  align: 'center', sortable: false,render:(row) => {
                if (row.IsBase == '1') {
                    return '是'
                } else {
                    return '否'
                }
            }},
            { label: '备注', param: 'Remark',  align: 'center', sortable: false},
            { label: '操作', align: 'center', width: '300',
                component:process
            }
        ],
        materiel_tableLabel: [
            { label: '物料编码', param: 'MaterielNo',  align: 'center', sortable: false},
            { label: '物料名称', param: 'MaterielName',  align: 'center', sortable: false},
            { label: '数量', param: 'Number',  align: 'center', sortable: false},
            { label: '单位', param: 'UnitName',  align: 'center', sortable: false},
            { label: '是否必须', param: 'Required',  align: 'center', sortable: false,render:(row) => {
                if (row.Required == '1') {
                    return '是'
                } else {
                    return '否'
                }
            }},
            { label: '操作', align: 'center', width: '300',
                component:process
            }
        ],
        standard_tableLabel: [
            { label: '序号', type: 'index',  align: 'center', sortable: false},
            { label: '周期', param: 'Period',  align: 'center', sortable: false},
            { label: '单位', param: 'Unit',  align: 'center', sortable: false, render:(row) => {
                if (row.Unit == 1) {
                    return '年'
                } else if (row.Unit == 2) {
                    return '月'
                } else {
                    return '日'
                }
            }},
            { label: '动作', param: 'Action',  align: 'center', sortable: false},
            { label: '标准', param: 'Standard',  align: 'center', sortable: false},
            { label: '操作', align: 'center', width: '300',
                component:process
            }
        ],
        extend_tableLabel: [
            { label: '属性名', param: 'Name',  align: 'center', sortable: false},
            { label: '属性值', param: 'Value',  align: 'center', sortable: false},
            { label: '备注', param: 'Remark',  align: 'center', sortable: false},
            { label: '操作', align: 'center', width: '300',
                component:process
            }
        ],
    };
  },
  props: {
      visible: {
          type: Boolean,
          default: false
      },
      type: {
          type: String,
          default: '1'
      },
      typeList: {
        type: Array,
        default() {
            return []
        }
      },
      formData: {
          type: Object,
          default () {
              return {}
          }
      },
      wareHouse: {
          type: Array,
          default () {
              return []
          }
      },
      brands: {
          type: Array,
          default() {
              return []
          }
      },
      manageStyle: {
          type: Array,
          default() {
              return []
          }
      }
  },
  computed: {
      ...mapGetters([
          'ULFB',
          'ULFE',
          'imgUrl',
          'QuerySupplier'
      ])
  },
  watch: {
      visible(newVal, oldVal) {
        this.show = newVal
      },
      formData(newVal, oldVal) {
        this.form = newVal
      },
      ULFB(newVal, oldVal) {
          if (newVal.Code == 0) {
              this.$message({
                  showClose: true,
                  type: 'info',
                  message: '开始上传'
              })
              this.upload()
          } else {
              this.$message({
                  showClose: true,
                  type: 'fail',
                  message: '上传失败'
              })
          }
      },
      ULFE(newVal, oldVal) {
          if (newVal.Code == 0) {
             this.$message({
                  showClose: true,
                  type: 'success',
                  message: '上传成功'
              })
              this.form.MaterielImageDetail.push({Address: newVal.ReturnData.FilePath, url: (this.imgUrl + newVal.ReturnData.FilePath)})
              console.log(this.form.MaterielImageDetail)
          } else {
              this.$message({
                  showClose: true,
                  type: 'fail',
                  message: '上传失败'
              })
          }
      },
      QuerySupplier (newVal, oldVal) {
          if (newVal.Code === 0) {
            this.supplierList = newVal.ReturnData
          }
      }
  },
  created() {
      that = this
  },
  methods: {
      selectChange (Id) {
        let Name = ''
        this.supplierList.map(item => {
            if (item.Id == Id) {
                Name = item.Name
            }
        })
        this.form.DefaultSupplierName = Name
        this.form.DefaultSupplierId = Id
    },
    remoteMethod(keyword) {
        let json = {
            MN: "QuerySupplier",
            DataContent: {
            "KeyWord":keyword
            }
        };
        this.MIX_send(json);
    },
    //   作业标准
    dataStandardSubmit (data) {
        if (this.currentIndex === '') {
            this.form.OperationStandardDetail.push(data)
        } else {
            this.form.OperationStandardDetail[this.currentIndex] = data
            this.currentIndex = ''
        }
        this.maskData = {}
        this.showStandard = false
    },
    //   物料清单
    dataMaterielSubmit (data) {
        console.log(data)
        if (this.currentIndex === '') {
            this.form.MaterielBOMDetail.push(data)
        } else {
            this.form.MaterielBOMDetail[this.currentIndex] = data
            this.currentIndex = ''
        }
        this.maskData = {}
        this.showMaterielList = false
    },
    //   扩展属性
    dataExtendSubmit (data) {
        if (this.currentIndex === '') {
            this.form.ExPropertyDetail.push(data)
        } else {
            this.form.ExPropertyDetail[this.currentIndex] = data
            this.currentIndex = ''
        }
        this.maskData = {}
        this.showExtend = false
    },
    //   单位换算
    dataUnitSubmit(data){
        if (data.IsBase == '1') {
            for (let i = 0; i < this.form.UnitConvertDetail.length; i++) {
                this.form.UnitConvertDetail[i].IsBase = '0'
            }
        }
        if (this.currentIndex === '') {
            this.form.UnitConvertDetail.push(data)
        } else {
            this.form.UnitConvertDetail[this.currentIndex] = data
            this.currentIndex = ''
        }
        this.maskData = {}
        this.showUnit = false
    },
    //   替代件
    closePropMask(data) {
        this.showReplace = false
        this.showUnit = false
        this.showStandard = false
        this.showMaterielList = false
        this.showExtend = false
    },
    dataSubmit(data){
        if (this.currentIndex === '') {
            this.form.ReplaceMaterielDetail.push(data)
        } else {
            this.form.ReplaceMaterielDetail[this.currentIndex] = data
            this.currentIndex = ''
        } 
        this.maskData = {}
        this.showReplace = false
    },
    //   新增替代件等等
    addNew () {
        this.formType = '1'
        this.addContent()
    },
    addContent () {
        switch(this.activeName) {
            case 'replace':
                if (this.formType == '1') {
                    this.maskData = {
                        Level: '',
                        MaterielName: '',
                        MaterielNo: '',
                        Remark: ''
                    }
                }
                this.showReplace = true
                break;
            case 'unit':
                if (this.formType == '1') {
                    this.maskData = {
                        Name: '',
                        Number: '',
                        IsBase: false,
                        Remark: ''
                    }
                } else {
                    this.maskData.IsBase = this.maskData.IsBase == '1'
                }
                this.showUnit = true
                break;
            case 'materielList':
                if (this.formType == '1') {
                    this.maskData = {
                        MaterielName: '',
                        MaterielNo: '',
                        Number: '',
                        Name: '',
                        Required: false
                    }
                } else {
                    this.maskData.Required = this.maskData.Required == '1'
                }                
                this.showMaterielList = true
                break;
            case 'standard':
                if (this.formType == '1') {
                    this.maskData = {
                        Period: '',
                        Unit: '',
                        Action: '',
                        Standard: ''
                    }
                }
                this.showStandard= true
                break;
            case 'extend':
                if (this.formType == '1') {
                    this.maskData = {
                        Name: '',
                        Value: '',
                        Remark: ''
                    }
                }
                this.showExtend= true
                break;
            default:
                break;
        }
    },
    //   点击表格编辑
    clickEdit(data, index) {
       this.currentIndex = index
       this.formType = '2'
       this.maskData = data
       this.addContent()
    },
    // 点击表格删除
    clickDel (data, index) {
        this.currentIndex = index
        switch(this.activeName) {
            case 'replace':
                this.form.ReplaceMaterielDetail.splice(this.currentIndex, 1)
                console.log(this.form.ReplaceMaterielDetail)
                break;
            case 'unit':
                this.form.UnitConvertDetail.splice(this.currentIndex, 1)
                break;
            case 'materielList':
                this.form.MaterielBOMDetail.splice(this.currentIndex, 1)
                break;
            case 'standard':
                this.form.OperationStandardDetail.splice(this.currentIndex, 1)
                break;
            case 'extend':
                this.form.ExPropertyDetail.splice(this.currentIndex, 1)
                break;
            default:
                break;
        }
    },
    handleClick(data) {

    },
    cancelSubmit () {
        this.$emit('closeMask', false)
        this.activeName = 'replace'
        // this.form
    },
    submitData () {
      this.form['IsTool'] = this.form['IsTool'] ? '1' : '0'
      this.form['IsReplaceMateriel'] = this.form['IsReplaceMateriel'] ? '1' : '0'
      this.form['IsAssets'] = this.form['IsAssets'] ? '1' : '0'
      this.$emit('addMateria', this.form)
    //   this.form = {}
    },
    handleRemove(file) {//删除
    console.log(file)
        this.form.MaterielImageDetail = this.form.MaterielImageDetail.filter(item => item.url != file.url)
        console.log(this.form.MaterielImageDetail)
    },
    handlePictureCardPreview(file) {//图片预览
        this.dialogVisible = true
        this.dialogImageUrl = file.url
    },
    handleChange(file) {
        const isJPG = file.raw.type.indexOf('image') !== -1;
        const isLt10M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('只能上传图片');
          return
        }
        if (!isLt10M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
          return
        }
        this.currentFile = file.raw
        let json = {
            "MN": "ULFB",
            "DataContent":{"FileName":file.name, "FileLength":file.size}
        }
        this.MIX_send(json)
    },
    upload() {
        this.MIX_send(this.currentFile, true)
    },
    handleButton() {

    },
    rowClick() {

    },
    cellClick () {

    },
    handleSortChange() {

    },
    handleSelectionChange () {

    }
  },
  components: {
    replaceProp,
    unitTransfor,
    operationStandard,
    extendAttr,
    materielBom
  }
}
</script>
<style scoped>
.formContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.el-row {
    width: 100% !important;
}
.replaceList {
    width: 100%;
    height: 166px;
}
.imgList {
    width: 100%;
    height: 166px;
}
.Unit {
        width: 100px !important;
        margin-left: 10px !important;
    }
</style>
<style>
.FormItem .el-form-item__content {
    display: flex !important;
}
.el-input__inner {
    padding-left: 10px;
}
</style>